<!-- 任务 -->
<template>
  <div component="Tavern" class="scrollWrap">
    <section class="disTable">
      <div class="disTableCell">
        <div class="disInblock list">
          <!-- 主内容 S -->
          <div v-if="tasks.length == 0" style="text-align:center">
            当前没有任务<br/>快去接受任务吧！
          </div>

          <section
            v-else
            v-for="item in tasks"
            :key="item.id"
            :class="item.isCurrent ? 'on' : ''"
          >
            <header>
              <span class="stars">
                <van-icon v-for="i of item.diff" :key="i" name="star" />
              </span>
              <div class="title">{{ item.name }}</div>
            </header>
            <div class="content">
              <p><span>目标物品：</span>{{ item._goodName }}</p>
              <p><span>收集数量：</span>{{ item.goodCount }}</p>
              <p><span>关联单位：</span>{{ item._units.join('、') }}</p>
              <p><span>关联地点：</span>{{ item._places.join('、') }}</p>
            </div>
            <footer>
              <van-button
                v-if="item.isCurrent"
                size="small"
                type="primary"
                @click="clickCancle(item)"
                >取消</van-button
              >
              <van-button
                v-else
                :disabled="hasCurrentTask"
                size="small"
                type="primary"
                @click="clickConfirm(item)"
                >接受</van-button
              >
              <span>赏金￥{{ item.price }}</span>
              <span class="canclePrice">违约金￥{{ item.canclePrice }}</span>
            </footer>
          </section>

          <!-- 主内容 E -->
        </div>
      </div>
    </section>
    <HeaderBar></HeaderBar>
    <FooterNav></FooterNav>
  </div>
</template>

<script>
export default {
  props: ['isMyTask'],
  data() {
    return {
      tasks: [],
      hasCurrentTask: false, // 已存在当前任务
    }
  },
  created() {
    let tasks = JSON.parse(JSON.stringify(game.curSave.tasks));
    if (this.isMyTask) {
      tasks = tasks.filter(item => item.isCurrent);
    }

    tasks.sort((a, b) => a.diff - b.diff);
    tasks.forEach(item => {
      item._goodName = common.getTypeName('goods', item.goodId);
      item._units = [];
      item.units.forEach(u => {
        item._units.push(common.getTypeName('peos', u))
      });
      item._places = [];
      item.places.forEach(u => {
        item._places.push(common.getTypeName('places', u))
      });
    });

    this.tasks = tasks;
    this.setHasCurrentTask();
  },
  mounted() {

  },
  methods: {
    // 接受任务
    clickConfirm(item) {
      this.$dialog.confirm({
        title: `${item.name}`,
        message: `确定接受这个任务吗？`,
      }).then(() => {
        item.isCurrent = true;
        this.setHasCurrentTask();
        this.saveTasks();
      }).catch(() => {
        // on cancel
      });
    },

    // 取消任务
    clickCancle(item) {
      this.$dialog.confirm({
        title: `${item.name}`,
        message: `确定取消这个任务吗？会扣除违约金￥${item.canclePrice}`,
      }).then(() => {
        item.isCurrent = false;
        this.setHasCurrentTask();
        this.saveTasks();
        //减少金钱
        game.curSave.gold -= item.canclePrice;
        this.$store.commit("updateStore");
      }).catch(() => {
        // on cancel
      });
    },

    // 设置已存在当前任务
    setHasCurrentTask() {
      for (const item of this.tasks) {
        if (item.isCurrent) {
          this.hasCurrentTask = true;
          return
        }
      }
      this.hasCurrentTask = false;
    },

    // 设置已存在当前任务
    saveTasks() {
      this.tasks.forEach(item => {
        let task = game.curSave.tasks.find(t => t.id == item.id);
        task.isCurrent = item.isCurrent
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.list {
  width: 100%;
  text-align: left;
  section {
    display: block;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #222222;
  }
  header {
    overflow: hidden;
    padding: 10px 10px;
    border-bottom: 1px solid #444;
    .stars {
      float: right;
      font-size: 12px;
      color: yellow;
    }
  }
  .content {
    font-size: 12px;
    color: #ddd;
    padding: 20px;
    border-bottom: 1px solid #444;
  }
  footer {
    overflow: hidden;
    padding: 10px 10px;
    .van-button {
      float: right;
    }
    .canclePrice {
      font-size: 12px;
      color: #999;
      margin-left: 10px;
    }
  }
}
</style>
